.x-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
  width: 100%;
}
.x-row + .x-row {
  margin-top: -5px;
  padding-top: 0;
}
.x-col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: block;
  padding: 5px;
  width: 100%;
}
/* Vertically Align Columns */
/* .x-row-* vertically aligns every .x-col in the .x-row */
.x-row-top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start;
}
.x-row-bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end;
}
.x-row-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}
/* .x-col-* vertically aligns an individual .x-col */
.x-col-top {
  -webkit-align-self: flex-start;
  -moz-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}
.x-col-bottom {
  -webkit-align-self: flex-end;
  -moz-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}
.x-col-center {
  -webkit-align-self: center;
  -moz-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}
/* Column Offsets */
.x-col-offset-10 {
  margin-left: 10%;
}
.x-col-offset-20 {
  margin-left: 20%;
}
.x-col-offset-25 {
  margin-left: 25%;
}
.x-col-offset-33,
.x-col-offset-34 {
  margin-left: 33.3333%;
}
.x-col-offset-50 {
  margin-left: 50%;
}
.x-col-offset-66,
.x-col-offset-67 {
  margin-left: 66.6666%;
}
.x-col-offset-75 {
  margin-left: 75%;
}
.x-col-offset-80 {
  margin-left: 80%;
}
.x-col-offset-90 {
  margin-left: 90%;
}
/* Explicit Column Percent Sizes */
/* By default each grid column will evenly distribute */
/* across the grid. However, you can specify individual */
/* columns to take up a certain size of the available area */
.x-col-10 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 10%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 10%;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
}
.x-col-20 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 20%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 20%;
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}
.x-col-25 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 25%;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.x-col-33,
.x-col-34 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.3333%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 33.3333%;
  -ms-flex: 0 0 33.3333%;
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.x-col-50 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 50%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.x-col-66,
.x-col-67 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 66.6666%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 66.6666%;
  -ms-flex: 0 0 66.6666%;
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}
.x-col-75 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 75%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 75%;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
.x-col-80 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 80%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 80%;
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%;
}
.x-col-90 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 90%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 90%;
  -ms-flex: 0 0 90%;
  flex: 0 0 90%;
  max-width: 90%;
}
.x-col-fixed {
  -webkit-box-flex: initial;
  -webkit-flex: initial;
  -moz-box-flex: initial;
  -moz-flex: initial;
  -ms-flex: initial;
  flex: initial;
}
/* Responsive Grid Classes */
/* Adding a class of responsive-X to a row */
/* will trigger the flex-direction to */
/* change to column and add some margin */
/* to any columns in the row for clearity */
@media (max-width: 567px) {
  .x-responsive-sm {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .x-responsive-sm .x-col,
  .x-responsive-sm .x-col-10,
  .x-responsive-sm .x-col-20,
  .x-responsive-sm .x-col-25,
  .x-responsive-sm .x-col-33,
  .x-responsive-sm .x-col-34,
  .x-responsive-sm .x-col-50,
  .x-responsive-sm .x-col-66,
  .x-responsive-sm .x-col-67,
  .x-responsive-sm .x-col-75,
  .x-responsive-sm .x-col-80,
  .x-responsive-sm .x-col-90 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 15px;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .x-responsive-md {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .x-responsive-md .x-col,
  .x-responsive-md .x-col-10,
  .x-responsive-md .x-col-20,
  .x-responsive-md .x-col-25,
  .x-responsive-md .x-col-33,
  .x-responsive-md .x-col-34,
  .x-responsive-md .x-col-50,
  .x-responsive-md .x-col-66,
  .x-responsive-md .x-col-67,
  .x-responsive-md .x-col-75,
  .x-responsive-md .x-col-80,
  .x-responsive-md .x-col-90 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 15px;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 1023px) {
  .x-responsive-lg {
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .x-responsive-lg .x-col,
  .x-responsive-lg .x-col-10,
  .x-responsive-lg .x-col-20,
  .x-responsive-lg .x-col-25,
  .x-responsive-lg .x-col-33,
  .x-responsive-lg .x-col-34,
  .x-responsive-lg .x-col-50,
  .x-responsive-lg .x-col-66,
  .x-responsive-lg .x-col-67,
  .x-responsive-lg .x-col-75,
  .x-responsive-lg .x-col-80,
  .x-responsive-lg .x-col-90 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 15px;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }
}
